<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if标签</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="hcp">
    <p>天气好的话出去玩，不好在家学习</p>
    <p>v-if如果条件为真，元素就会显示</p>
    <p v-if="sun">今天天气好出去玩</p>
    <p v-else>今天天气不好，在家学习</p>

    <hr>
    <input type="number" v-model="age">
    <p v-if="age<18">未成年</p>
    <p v-else-if="age>=18 && age <30">成年人</p>
    <p v-else-if="age>=30 && age <60">中年人</p>
    <p v-else>老年人</p>
</div>

<script>
    new Vue({
        el:"#hcp",
        data:{
            sun:true,
            age:26
        }
    });
</script>
</body>
</html>